import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:moose_app/ui/screens/discovery/circle/circle_item.dart';
import 'package:moose_app/ui/values/values.dart';
import 'package:moose_app/ui/widgets/sticky_tabbar_delegate.dart';

import 'detail_author_header_delegate.dart';

class ATHDetailAuthorScreen extends StatelessWidget {
  static final String routeName = "app://detailAuthor";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ATHDetailAuthorBody(),
    );
  }
}

class ATHDetailAuthorBody extends StatefulWidget {
  @override
  _ATHDetailAuthorBodyState createState() => _ATHDetailAuthorBodyState();
}

class _ATHDetailAuthorBodyState extends State<ATHDetailAuthorBody>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  TabController _tabController;

  List<String> _tabsText = ["作品", "喜欢"];

  List<Tab> _tabs = [];

  @override
  void initState() {
    super.initState();
    _tabsText.forEach((element) {
      _tabs.add(Tab(
        text: element,
      ));
    });

    _tabController =
        TabController(initialIndex: 1, length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return _buildCustomScrollView();
  }

  Widget _buildNestedScrollView() {
    return NestedScrollView(
      body: _buildTabBarView(),
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverPersistentHeader(
            pinned: true,
            delegate: ATHStickyTabBarDelegate(
              child: _buildTabBar(),
            ),
          ),
        ];
      },
    );
  }

  Widget _buildCustomScrollView() {
    return CustomScrollView(
      slivers: [
        _buildSliverPersistentHeader(),
        SliverPersistentHeader(
          pinned: true,
          delegate: ATHStickyTabBarDelegate(child: _buildTabBar()),
        ),
        SliverFillRemaining(
          child: _buildTabBarView(),
        ),
      ],
    );
  }

  Widget _buildSliverPersistentHeader() {
    return SliverPersistentHeader(
      pinned: true,
      delegate: SliverDetailAuthorHeaderDelegate(
          title: '江景',
          collapsedHeight: 40,
          expandedHeight: kSize600,
          paddingTop: MediaQuery.of(context).padding.top,
          coverImgUrl:
              'https://gitee.com/shizidada/moose-resource/raw/master/banner/banner-4.jpg'),
    );
  }

  TabBar _buildTabBar() {
    return TabBar(
      isScrollable: true,
      controller: _tabController,
      tabs: _tabs,
      indicatorColor: kColor33,
      indicatorSize: TabBarIndicatorSize.label,
      labelStyle: TextStyle(fontSize: kFontSize32, fontWeight: FontWeight.bold),
      labelColor: kColor33,
      unselectedLabelStyle: TextStyle(fontSize: kFontSize30),
      unselectedLabelColor: kColor99,
    );
  }

  TabBarView _buildTabBarView() {
    List<Widget> tabContents = [];
    for (int index = 0; index < _tabsText.length; index++) {
      tabContents.add(_buildRecordView());
    }
    return TabBarView(
        physics: NeverScrollableScrollPhysics(),
        controller: _tabController,
        children: tabContents);
  }

  Widget _buildRecordView() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: kSize20),
      child: StaggeredGridView.countBuilder(
          padding: EdgeInsets.zero,
          primary: false,
          shrinkWrap: true,
          crossAxisCount: 4,
          itemCount: 5,
          mainAxisSpacing: kSize10,
          crossAxisSpacing: kSize10,
          staggeredTileBuilder: (index) {
            return StaggeredTile.fit(2);
          },
          itemBuilder: (context, index) {
            return CircleItem(
                'https://gitee.com/shizidada/moose-resource/raw/master/moose/banner/${index + 1}.jpg',
                index);
          }),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
